<template>
  <div class="goodsItem"  @click="goDetail()">
    <img v-lazy="g.img" alt="" @load="GoodsImgLoad" :key="g.img">
    <div class="goodsInfo">
      <p>{{g.title}}</p>
      <span class="price">￥{{g.price | number() }}</span>
      <span class="collect">{{g.collect}}</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "GoodsItem",
        props:{
            g:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        filters: {
            //保留2位小数点过滤器 不四舍五入
            number(value) {
                let toFixedNum = Number(value).toFixed(3);
                return toFixedNum.substring(0, toFixedNum.toString().length - 1);

            }
        },
        methods:{
            GoodsImgLoad(){
                // console.log('图片加载---');
                this.$bus.$emit('GoodsImgLoad')
            },
            goDetail(){
                this.$router.push('/detail/'+this.g.pid)
            }
        }
    }
</script>

<style scoped>

  .goodsItem{
    width: 48%;
  }

  .goodsInfo{
    font-size: 13px;
    text-align: center;
  }

  .goodsItem img{
    width: 100%;
    height: 168px;
    border-radius: 5px;
  }

  .goodsInfo p{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .goodsInfo .price{
    color: var(--color-high-text);
    margin-right: 23px;
  }
  .goodsInfo .collect{
    position: relative;
  }

  .goodsInfo .collect::before{
    content: '';
    position: absolute;
    left: -16px;
    right: 0;
    top: 0;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: url("/img/common/collect.svg") 0 0/13px 13px;
  }
</style>
